<template>
  <el-row class="big-plus-box">
    <el-col :span="24" class="container-box">
      <el-row>
        <el-col :span="3">
          <el-tabs v-model="activeName1" class="demo-tabs menu-tabs" @tab-click="handleClick">
            <el-tab-pane label="审计流程" name="first">
              <el-row>
                <el-col :span="24" align="end" class="left-tabs-btn">
                  <el-button type="primary" text @click="openProcessDialog">
                    <el-icon><Setting /></el-icon>流程配置
                  </el-button>
                </el-col>
              </el-row>
              <div class="tree-contain">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  @select="handleSelect"
                >
                  <el-sub-menu index="4">
                    <template #title>
                      <el-icon><location /></el-icon>
                      <span>项目准备</span>
                    </template>
                    <el-menu-item index="4-1">审计实施方案</el-menu-item>
                    <el-menu-item index="4-2">项目资料</el-menu-item>
                    <el-menu-item index="4-3">承诺书</el-menu-item>
                  </el-sub-menu>
                </el-menu>
              </div>
            </el-tab-pane>
            <el-tab-pane label="审计人员" name="fourth">
              <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="8" align="end" class="left-tabs-btn">
                  <el-button type="primary" text>
                    <el-icon><Setting /></el-icon>人员导出
                  </el-button>
                </el-col>
                <el-col :span="8" align="end" class="left-tabs-btn">
                  <el-button type="primary" text @click="openPeopleDialog">
                    <el-icon><Setting /></el-icon>配置人员
                  </el-button>
                </el-col>
              </el-row>
              <el-menu
                default-active="peopleMenuActice"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon><location /></el-icon>
                    <span>测试4</span>
                  </template>
                </el-sub-menu>
              </el-menu>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="21">
          <index-home-implementation-plan v-if="activeMenuItem === '4-1'"></index-home-implementation-plan>
          <index-home-project-data v-else-if="activeMenuItem === '4-2'"></index-home-project-data>
          <ProjectAudit v-else-if="activeMenuItem === '4-3'"/>
          <basic-container v-else>
            <header>
              <el-row>
                <el-col :span="10" align="start">项目资料</el-col>
                <el-col :span="14" align="end">
                  <el-button type="primary" >创建</el-button>
                </el-col>
              </el-row>
            </header>
            <div class="container">
              <el-tabs v-model="activeName2" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="项目资料列表" name="xmzl">项目资料列表</el-tab-pane>
                <el-tab-pane label="提交流程情况" name="tjlc">
                  <div class="contain-top-card">
                    <div class="title">提交进度：</div>
                    <el-steps :active="2" align-center>
                      <el-step title="提交人：张三" />
                      <el-step title="接收人：李四" />
                      <el-step title="流程结束" />
                    </el-steps>
                  </div>
                  <div class="contain-bottom-card">
                    <div class="title">提交记录详情：</div>
                    <el-timeline>
                      <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        :size="activity.size"
                        :hollow="activity.hollow"
                      >
                        <template #default>
                          <el-row>
                            <el-col :span="24">
                              <span v-if="activity.result == 't'">提交人:</span>
                              <span v-else-if="activity.result == 'c'">操作人:</span>
                              <span v-else>流程完成</span>
                              {{ activity.result == 'l' ? '' : activity.content }}
                            </el-col>
                            <el-col :span="24" class="time-p" v-if="activity.result !== 'l'">
                              <span>操作：</span>
                              <span class="submit-title" v-if="activity.status == 'tj'">提交 &nbsp;&nbsp;</span>
                              <span class="return-title" v-else-if="activity.status == 'th'">退回 &nbsp;&nbsp;</span>
                              <span class="yes-title" v-else-if="activity.status == 'tg'">通过 &nbsp;&nbsp;</span>
                              <span class="time-title">操作时间：{{ activity.timestamp }}</span>
                            </el-col>
                            <el-col :span="24" class="suggest-input" v-if="activity.result !== 'l'">
                              <div>操作意见：</div>
                              <div>
                                <div>同意</div>
                              </div>
                            </el-col>
                          </el-row>
                        </template>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </basic-container>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <processConfig :dialogVisible="processVisible" @getProcessValue="getProcessValue"></processConfig>
  <peopleConfig :dialogVisible="peopleVisible" @getPeopleValue="getPeopleValue"></peopleConfig>
</template>
<script setup>
import processConfig from '../components/process-config.vue';
import peopleConfig from '../components/people-config.vue';
import IndexHomeImplementationPlan from './index-home-implementation-plan/index.vue';
import IndexHomeProjectData from './index-home-project-data/index.vue';
import ProjectAudit from '../project-audit/index.vue';
// const { processConfigDialog } = processConfig;
const processVisible = ref(false);
const peopleVisible = ref(false);
const openProcessDialog = () => {
  console.log(processVisible.value);
  processVisible.value = true;
  console.log(processVisible.value);
};
const getProcessValue = (v) => {
  processVisible.value = v;
};

const openPeopleDialog = () => {
  console.log(peopleVisible.value);
  peopleVisible.value = true;
  console.log(peopleVisible.value);
};
const getPeopleValue = (v) => {
  peopleVisible.value = v;
};
const activeName1 = ref('first');
const activeName2 = ref('tjlc');
const activities = ref([
  {
    content: '張三',
    result: 'c',
    status: 'tj',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    color: 'blue',
  },
  {
    content: '1111',
    timestamp: '2018-04-03 20:46',
    color: 'red',
    result: 't',
    status: 'th',
    type: 'primary',
  },
  {
    content: '1111',
    timestamp: '2018-04-03 20:46',
    color: 'red',
    result: 't',
    status: 'th',
    type: 'primary',
  },
  {
    content: '1111',
    timestamp: '2018-04-03 20:46',
    color: 'red',
    result: 't',
    status: 'th',
    type: 'primary',
  },
  {
    content: '22222',
    timestamp: '2018-04-03 20:46',
    size: 'large',
    result: 'c',
    status: 'tg',
    type: 'primary',
  },
  {
    content: '333',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    result: 'l',
    hollow: true,
  },
  {
    content: '4444',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    result: 'l',
  },
]);

const activeMenuItem = ref('1');

const handleSelect = (index) => {
  activeMenuItem.value = index;
};
</script>
<style lang="scss" scoped>
.big-plus-box {
  background: #f0f2f5;
  .container-box {
    .el-tabs:nth-child(1) {
      background: white;
      .left-tabs-btn {
        font-size: 12px;
        font-family:Source Han Sans CN-Regular,Source Han Sans CN;
        font-weight: 400;
        line-height: 17px;
        -webkit-background-clip: text;
      }
    }
  }
}
.demo-tabs {
  width: 100%;
}
.tree-contain {
  height: calc(100vh - 160px);
  overflow-y: auto;
}
.el-tab-pane {
  height: calc(100vh - 170px);
}
::v-deep .el-tabs__nav .is-top {
  padding-left: 20px !important;
}
::v-deep .el-tabs__active-bar {
  left: -10px !important;
}
header {
  .el-col-10 {
    background-color: #f0f2f5;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #25292c;
    line-height: 42px;
    height: 50px;
  }
  .el-col-14 {
    background-color: #f0f2f5;
    height: 50px;
    padding-right: 20px;
  }
}
.container {
  height: calc(100vh - 175px);
  padding: 5px 15px 5px 15px;
  .title {
    font-size: 16px;
    font-family:
      Source Han Sans CN-Medium,
      Source Han Sans CN;
    font-weight: 500;
    color: #25292c;
    line-height: 17px;
    -webkit-background-clip: text;
    margin: 20px 0;
  }
  .contain-top-card {
    height: 15vh;
    min-height: 15vh;
    border-bottom: 1px solid #efeded;
    margin-bottom: 20px;
    .el-steps {
      margin-left: -50px;
      margin-top: 30px;
    }
  }
  .contain-bottom-card {
    .el-timeline {
      height: 52vh;
      overflow: auto;
      margin-left: 10px;
      margin-top: 30px;
      .time-p {
        span:nth-child(1) {
          font-size: 12px;
          font-family:
            Source Han Sans CN-Regular,
            Source Han Sans CN;
          font-weight: 400;
          color: #989da3;
          line-height: 17px;
          -webkit-background-clip: text;
        }
        .submit-title {
          font-size: 12px;
          color: blue;
        }
        .return-title {
          font-size: 12px;
          color: red;
        }
        .yes-title {
          font-size: 12px;
          color: green;
        }
        .time-title {
          font-size: 12px;
          font-family:
            Source Han Sans CN-Regular,
            Source Han Sans CN;
          font-weight: 400;
          color: #989da3;
          line-height: 17px;
          -webkit-background-clip: text;
        }
      }
      .suggest-input {
        div:nth-child(1) {
          font-size: 14px;
          font-family:
            Source Han Sans CN-Regular,
            Source Han Sans CN;
          font-weight: 400;
          color: #50565d;
          line-height: 17px;
          -webkit-background-clip: text;
        }
        div:nth-child(2) {
          font-size: 14px;
          font-family:
            Source Han Sans CN-Regular,
            Source Han Sans CN;
          font-weight: 400;
          color: #50565d;
          line-height: 17px;
          -webkit-background-clip: text;
          background: #f6f8fa;
          width: 100%;
          height: 100%;
          margin: 10px 0 20px 0;
          div {
            margin: 10px;
            padding: 5px;
          }
        }
      }
    }
    .el-col-24 {
      margin: 5px 0;
    }
  }
}
.el-col {
  margin-bottom: 0px;
}
.el-step.is-horizontal {
  flex-basis: 15% !important;
}
::v-deep .el-timeline-item__node--large {
  left: 0px !important;
}
::v-deep .el-timeline-item__node--normal {
  left: 0px !important;
}
</style>
